<template>
	<view class="appointment-container">
		<!-- 分类标签 -->
		<view class="appointment-tabs">
			<text class="appointment-tab" :class="{active: activeTab === 'all'}" @click="switchTab('all')">全部</text>
			<text class="appointment-tab" :class="{active: activeTab === 'pending'}"
				@click="switchTab('pending')">待预约</text>
			<text class="appointment-tab" :class="{active: activeTab === 'completed'}"
				@click="switchTab('completed')">已完成</text>
		</view>

		<!-- 预约列表 -->
		<scroll-view class="appointment-list-container" scroll-y>
			<view class="appointment-card">
				<view class="appointment-details">
					<text class="appointment-detail-item">预约时间：1</text>
					<view class="doctor-number-line">
						<text class="appointment-detail-item">预约医生：1</text>
						<text class="appointment-number">预约号：<text style="color:#01bf14 ;">1</text></text>
					</view>
					<text class="appointment-detail-item">医院地址：1</text>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="no-data">
				暂无预约数据
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 当前激活的tab
	const activeTab = ref('all')


	// 切换tab
	const switchTab = (tab) => {
		activeTab.value = tab
	}
</script>

<style>
	/* 页面容器 */
	.appointment-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 标签栏样式 */
	.appointment-tabs {
		width: 100%;
		display: flex;
		height: 100rpx;
		line-height: 80rpx;
		justify-content: space-around;
		margin: 10rpx 0;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;
	}

	/* 单个标签 */
	.appointment-tab {
		padding: 15rpx 30rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: #666;
	}

	/* 激活状态标签 */
	.appointment-tab.active {
		color: #01bf14;
		border-bottom: 8rpx solid #00ff19;
	}

	/* 预约列表容器 */
	.appointment-list-container {
		height: calc(100vh - 200rpx);
	}

	/* 单个预约项 */
	.appointment-card {
		width: 90%;
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		height: 175rpx;
		box-shadow: 0 0 20rpx rgba(0, 190, 0, 0.5);
	}

	/* 医生和预约号同行 */
	.doctor-number-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 预约详情 */
	.appointment-details {
		font-size: 26rpx;
		padding: 20rpx;
	}

	.appointment-detail-item {
		display: block;
		margin-top: 5rpx;
		color: #666;
		line-height: 1.8;
	}

	.appointment-number {
		color: #666;
		font-size: 44rpx;
		font-weight: bold;
	}

	/* 无数据提示 */
	.no-data {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>